<script setup lang="ts">
import type { OptionsType, PlusColumn } from 'plus-pro-components'
import type { VxeGridProps, VxePagerEvents } from 'vxe-table'

import { useDelProject, useGetAllList, usePageList } from '@fl/api/man-api/pricing-tool'
import { SearchForm, SearchTable } from '@fl/components'
import { useMessage } from '@fl/hooks/web/use-message'
import { cloneDeep } from 'lodash-es'

import AddOrEdit from './component/add-or-edit.vue'

const id = ref<number | string>('')
const visible = ref<boolean>(false)

const router = useRouter()
const tableRef = ref()
const { createConfirmModal, createMessage } = useMessage()
const initialPage = {
    currentPage: 1,
    pageSize: 10,
    total: 0,
}
const tablePage = ref(cloneDeep(initialPage))

type IState = {
    productCategory?: string
    projectName?: string
}

const initialState: IState = {
    productCategory: '',
    projectName: '',
}
const state = ref(cloneDeep(initialState))

const params = computed(() => ({
    page: tablePage.value.currentPage,
    size: tablePage.value.pageSize,
    ...state.value,
}))

const { data: allList } = useGetAllList()
const { data: tableData, isLoading } = usePageList(params)
const { mutate: delProjectMutate } = useDelProject()

const records = ref()
const newAllList = ref<any>([])
watchEffect(() => {
    if (allList.value) {
        newAllList.value = allList.value && cloneDeep(allList.value).map(item => ({ label: item.categoryName, value: item.id }))
    }
})

watchEffect(() => {
    if (tableData.value) {
        records.value = cloneDeep(tableData.value.records)
        tablePage.value.total = tableData.value.total ?? 0
    }
})

const columns: PlusColumn[] = [

    {
        label: '项目名称',
        prop: 'projectName',
    },
    {
        label: '组合商品类目',
        options: newAllList as OptionsType,
        prop: 'categoryId',
        valueType: 'select',
    },
]

const gridOptions = reactive<VxeGridProps<any>>({
    align: 'center',
    columnConfig: {
        resizable: true,
    },
    columns: [
        { title: '序号', type: 'seq', width: 70 },
        { field: 'projectName', title: '项目名称' },
        { field: 'categoryName', title: '组合商品类目' },
        { field: 'biddingEnterprise', title: '招标单位' },
        { field: 'projectDate', title: '招标时间' },
        { fixed: 'right', slots: { default: 'operate' }, title: '操作', width: 200 },
    ],
    data: [],
    height: 550,
    toolbarConfig: {
        slots: {
            buttons: 'toolbar_buttons',
        },
    },
})

const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
    tablePage.value.currentPage = currentPage
    tablePage.value.pageSize = pageSize
}

function search(values: any) {
    tablePage.value = cloneDeep(initialPage)
    state.value = { ...state.value, ...values }
}

function reset() {
    state.value = { ...initialState }
    tablePage.value = cloneDeep(initialPage)
}

function addForm() {
    visible.value = true
    id.value = ''
}

function del(listId: number) {
    createConfirmModal({ content: '是否确认删除？', onError: () => {
        console.log('操作取消！')
    }, onSuccess: () => {
        delProjectMutate({ id: listId }, {
            onSuccess: () => {
                createMessage.success('删除成功')
            },
        })
    } })
}

function edit(listId: number) {
    id.value = listId
    visible.value = true
}

function entering(id: string, categoryId: string) {
    router.push({
        path: '/operations-pages/pricing-tool/edit-quotation-list',
        query: {
            categoryId,
            id,
        },
    })
}
</script>

<template>
    <div class="mb-20">
        <ElCard shadow="never">
            <SearchForm v-bind="state"
                        :columns="columns"
                        submit-text="查询"
                        @submit="search"
                        @reset="reset"
            />
        </ElCard>
    </div>

    <ElCard shadow="never">
        <SearchTable ref="tableRef"
                     v-bind="gridOptions"
                     v-model:pager="tablePage"
                     :loading="isLoading"
                     :data="records"
                     :seq-config="{ startIndex: (tablePage.currentPage - 1) * tablePage.pageSize }"
                     row-class-name="table-row-style"
                     @page-change="handlePageChange"
        >
            <template #toolbar_buttons>
                <el-space class="mb-12">
                    <el-button type="primary"
                               @click="addForm"
                    >
                        <div class="i-ic:baseline-add size-16" />
                        新增
                    </el-button>
                </el-space>
            </template>

            <template #operate="{ row }">
                <ElSpace class="red">
                    <span class="text-#DA0004 cursor-pointer"
                          @click="edit(row.id)"
                    >
                        编辑
                    </span>

                    <span class="text-#DA0004 cursor-pointer"
                          @click="del(row.id)"
                    >
                        删除
                    </span>

                    <span class="text-#DA0004 cursor-pointer"
                          @click="entering(row.id, row.categoryId)"
                    >
                        录入报价
                    </span>
                </ElSpace>
            </template>
        </SearchTable>
    </ElCard>

    <AddOrEdit :key="id"
               v-model:visible="visible"
               v-model:id="id"
               :new-all-list="newAllList"
    />
</template>
